<template>
  <div class="grid">
    <div class="container">
      <div>
        <p>1</p>
      </div>
      <div>
        <p>2</p>
      </div>
      <div>
        <p>3</p>
      </div>
      <div>
        <p>4</p>
      </div>
      <div>
        <p>5</p>
      </div>
      <div>
        <p>6</p>
      </div>
      <div>
        <p>7</p>
      </div>
      <div>
        <p>8</p>
      </div>
      <div>
        <p>9</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "grid",
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.container {
  display: grid;
  //   grid-template-columns: repeat(2, 100px 20px 80px);
  //   width: 500px;
  //   grid-template-columns: repeat(auto-fill, 100px);
  //   grid-template-columns: 1fr 2fr;
  //   grid-template-columns: 150px 1fr 2fr;
  //   grid-template-columns: 1fr 1fr minmax(100px, 1fr);
//   grid-template-areas:
//     "header header header"
//     "main main sidebar"
//     "footer footer footer";
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
}
</style>
